<template>

  <div style="width: 100%; height: 100%; background-color: white;">

  <div style="width: 98%; height: 100%; background-color:white;">
    <div style="width:96%; height: 95%; background-color:  white;">
      <el-row>
        <el-col :span="8" :offset="16">
          校&nbsp&nbsp&nbsp&nbsp区:&nbsp&nbsp<el-select style="width: 270px;">
            <el-option>

            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: -10px;">
        <el-col :span="8" :offset="4" style="width: 400px; height: 230px;">
          <div style="width:100%; height: 100%; margin-top: 10px;"><Imag v-if="refresh"></Imag></div>
      </el-col>
      <el-col :span="8" :offset="4" style="width: 300px; height: 180px;">
          <div  style="width:100%; height: 100%;"></div>
      </el-col>
      </el-row>
      <el-descriptions >
    <el-descriptions-item label="支出类型"><el-select size="mini" v-model="value" @change="findByOrderType()" placeholder="请选择">
      <el-option v-for="item in options"
      :key="item.id"
      :label="item.type"
      :value="item.id"></el-option></el-select></el-descriptions-item>
    <el-descriptions-item label="支出日期">
      <el-date-picker
      v-model="value3"
      @change="findByTime()"
      size="mini"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
        </el-descriptions-item>

      </el-descriptions>
      <el-row style="background-color: aliceblue;">
        <el-col :span="10">
        <div style="float: left; color: black;">
        <label>记录条数:</label>
        <label style=" margin-left: 30px;">支出金额:</label>

        </div>
       </el-col>
      <el-col :span="6" :offset="8">
        <el-button type="danger" size="small" @click="addByOutPut()">添加支出</el-button>
        <el-button type="danger" size="small" @click="addByOutPutType()">支出类型设置</el-button>
        <el-button type="info" size="small" @click="excel111()">导出</el-button>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <template>
                <el-table
                    :data="orderlist"
                    border
                    stripe
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange">

                    <el-table-column
                    width="60"
                            prop="id"
                            label="序号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="支出类型"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="支出金额"
                            align="center">
                    </el-table-column>
                    <el-table-column

                            prop="time"
                            label="支出时间"
                            align="center">
                    </el-table-column>
                    <el-table-column

                            prop="master"
                            label="经办人"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            >
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-col>
      </el-row>
    </div>
    </div>
    <el-dialog
            title="支出类型设置"
            :visible.sync="dialogVisibles"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand" label-width="100px" class="demo-feeStarand">
            <el-form-item label="添加支出类型:" prop="name">
                <el-input style="width: 200px; margin-right: 200px;" v-model="type" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibles = false">取 消</el-button>
    <el-button type="primary" @click="update1()">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
            title="添加支出"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
        <el-form :model="orderlist" ref="feeStarand"  label-width="100px" class="demo-feeStarand">

            <el-form-item label="支出类型" prop="idcard">
              <el-select size="mini" v-model="value" placeholder="请选择">
              <el-option v-for="item in options"
                :key="item.id"
                :label="item.type"
                :value="item.id"></el-option></el-select>
            </el-form-item>
            <el-form-item label="支出金额:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="money" size="small"></el-input>
            </el-form-item>
            <el-form-item label="支出时间:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="times" size="small"></el-input>
            </el-form-item>
            <el-form-item label="经办人:" prop="name">
              <el-input style="width: 200px; margin-left: -190px;" v-model="master" size="small"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
                <el-input v-model="remark" size="small"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="orderupdate()">确 定</el-button>
        </span>
    </el-dialog>

  </div>
</template>
<script>
import echarts from 'echarts'
import Imag from '../components/imag'
import Page from '../components/page'
  export default{
    components:{
      Imag,Page
    },
    data(){
      return{
        refresh: true,
        type:"",
        times:"",
        remark:"",
        money:"",
        master:"",
        dialogVisibles:false,
        value3:"",
        name:"",
        option1ss: [{
          value3: '支付宝',
          label: '支付宝'
        }, {
          value3: '微信',
          label: '微信'
        }, {
          value3: '现金',
          label: '现金'
        }],
        scope:"",
        index: 0,
        dialogVisible:false,
        value3:"",
        multipleSelection:[],
        options: [],
        value:"",
        orderlist:[],
        name: '',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:'',
        option1s: [{
          value2: '未结清',
          label: '未结清'
        }, {
          value2: '已结清',
          label: '已结清'
        }, {
          value2: '已退费',
          label: '已退费'
        }],
      };
    },

  mounted() {
    this.initChart()
    this.initChart2()
  },
  methods: {
    refreshComp() {
            // 移除组件
            this.refresh = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.refresh = true
            })
        },
    addByOutPut(){
      this.dialogVisible = true
    },
    addByOutPutType(){
      this.dialogVisibles = true
    },
    excel111(){
      window.location.href="http://localhost:8082/orders/downloadexcel1"
      this.$message.success("导出成功!")
    },
    findByOrderType(){
      this.index = 3
      this.find1()
      this.$message.success("查询成功!")
    },
    find1(){
      this.$axios.get("orders/findByOutPut/"+this.value).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.value = ""
        }
      })
    },
    findByTime(){
      this.index = 6
      this.find4()
    },
    find4(){
      let data = {
          starttime: this.dateToString(this.value3[0]),
          lasttime: this.dateToString(this.value3[1])
      }
      alert(data.starttime)
      alert(data.lasttime)
      this.$axios.post("orders/findByOutPutTime",data).then(res=>{
        if(res.data.code == 200){
          this.orderlist = res.data.data
          this.$message.success("查询成功!")
          this.value3 = ""
        }
      })
    },
    dateToString: function (date) {
                var year = date.getFullYear();
                var month = (date.getMonth() + 1).toString();
                var day = (date.getDate()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime;
            },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    findByCount(){
      this.index = 1
      this.$axios.get("/orders/findByCount/"+"1").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },
    findByGrounp(){
      this.index = 2
      this.$axios.get("/orders/findByCount/"+"2").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },
    findByGoods(){
      this.index = 3
      this.$axios.get("/orders/findByCount/"+"3").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },
    findByDeleteOrder(){
      this.$axios.get("/orders/findByDeleteOrder").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)
    })
    },
    ifback(backid){
      if(backid == 1){
        return true
      }else{
        return false
      }
    },
    del(scope){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.$axios.delete("/orders/delById/"+scope.id).then(res=>{
          if(res.data.code == 200){
          this.$message.success("删除成功")
          this.findByOrders()
          this.refreshComp()
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
    },
    backmoney(scope){
      this.scope = scope.row
      this.dialogVisibles = true
      this.$axios.get("/orders/findByTimes/"+this.scope.userid).then(res=>{
        if(res.data.code == 200){
          this.times = 10 - res.data.data
        }
      })
    },
    update1(){
      this.$axios.get("/orders/addOutPutType/"+this.type).then(res => {
      if(res.data.code == 200){
        this.$message.success("添加成功")
        this.type = ""
        this.findByType()
        this.dialogVisibles = false
      }
    })
    },
    getmoney(scope){
      this.scope = scope.row
      console.log(scope)
      this.orderlist[0].lastpayment = this.scope.lastpayment
      this.dialogVisible = true
    },
    orderupdate(){
      console.log(this.value)
      let data = {
        outputid:this.value,
        money:this.money,
        time : this.times,
        master : this.master,
        remark:this.remark
      }
      this.$axios.post("/orders/addByOutPut",data).then(res => {
      if(res.data.code == 200){
        this.$message.success("添加成功")
        this.money = ""
        this.remark = ""
        this.master = ""
        this.times = ""
        this.value = ""
        this.findByOrders()
        this.refreshComp()
        this.dialogVisible = false
      }

    })
    },
    ifbacks(backid){
      if(backid == 2){
        return true
      }else{
        return false
      }
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    detal(scope){
      console.log(scope)
    },

    initChart2() {
      const chart = echarts.init(document.getElementById('chart1'))
      const option = {
        title: {

        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '订单金额',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30]
          }
        ]
      }
      chart.setOption(option)
    },
    gotodetail(scope){
      console.log(scope)

      this.$router.push({
        name: 'Orderdetail',
        params:{
          orderdetail:scope
        }
      })
    },
    findByOrders(){
      this.$axios.get("/orders/findByOutputMoney").then(res => {
      console.log(res.data.data)
      this.orderlist = res.data.data
      console.log(this.orderlist)

    })
    },
    findByType(){
      this.$axios.get("/orders/findByType").then(res => {
      console.log(res.data.data)
      this.options = res.data.data
      console.log(this.options)

    })
    }
  },
  mounted() {
    this.findByOrders()
    this.findByType()
    this.index = 0
  }
}
</script>

<style scoped>
</style>
